<meta content=""  charset="utf-8">

<table width="100%">
    <tr class="calendarx">
        <td>
            <form name="selsuc" action="<?php echo url_for('reserva/listarxdia'); ?>" method="post">
                <table>
                    <tbody>
                        <?php echo $formularioSeleccionSucursales; ?>
                    </tbody>
                </table>
            </form>
        </td>

        <td width="20%">

<script type="text/javascript">
$(document).ready(function() {
  $("#datepicker").datepicker( {
    onSelect: function(date) {

        var theDate = new Date(Date.parse($(this).datepicker('getDate')));
        var MyFecha = $.datepicker.formatDate('yy-mm-dd', theDate);

        //INDICE SELECCIONADO
        var IndiceSucuarsal = document.selsuc.sucursal_id.selectedIndex;
        var SucursalSeleccionada = document.selsuc.sucursal_id.options[IndiceSucuarsal].value;



        jQuery.ajax({type:'POST',
            dataType:'html',
            success:function(data, textStatus){
                jQuery('#tabs-1').html(data);

          //alert(SucursalSeleccionada);

            },
            //url:'/gestdent/web/system.php/atencionesvacio'
            //url:'<?php //echo url_for('supervisorvacio/index/') ?>'.concat(date.toString())
            //url:'<?php //echo url_for("@default?module=supervisorvacio&action=index&fecha=") ?>'.concat("2010-09-14")
            url:'<?php echo url_for("@default?module=supervisorvacio&action=index&fecha=") ?>'.concat(MyFecha)



        });

         jQuery.ajax({type:'POST',
            dataType:'html',
            success:function(data, textStatus){
                jQuery('#tabs-3').html(data);
            },
            //url:'/gestdent/web/system.php/atencionesvacio'
            //url:'<?php //echo url_for('supervisorvacio/index/') ?>'.concat(date.toString())
            //url:'<?php //echo url_for("@default?module=supervisorvacio&action=index&fecha=") ?>'.concat("2010-09-14")
            //url:'<?php //echo url_for("@default?module=supervisorvacio&action=index&fecha=") ?>'.concat(MyFecha)
            url:'<?php echo url_for("@default?module=general&action=index") ?>'

        });

        return false;


    },
    selectWeek: true,
    inline: true,
    startDate: '01/01/2000',
    firstDay: 1
  });
});
</script>

            <div class="calendarx">
            <div  id="datepicker"></div>
            </div><!-- End demo -->
        </td>
    </tr>

</table>

<style type="text/css">
/* Vertical Tabs
----------------------------------*/
.ui-tabs-vertical { width: 55em; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: right; width: 12em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: right; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}

.ui-tabs-vertical .ui-tabs-nav li a.nikon {background:url(http://localhost/gestdent/web/images/under_construction.jpg);}
.ui-tabs-vertical .ui-tabs-nav li a.canon {background:url(canon.png);}
.ui-tabs-vertical .ui-tabs-nav li a.pentax {background:url(pentax.png);}




</style>







<div class="demo">

<div id="tabs" class="tabs-bottom">
	<ul>
		<li><a href="#tabs-1" class="nikon">Mañana</a></li>
		<li><a href="#tabs-2">Tarde</a></li>
                <li><a href="#tabs-3">MI FECHA</a></li>
                <li><a href="#tabs-4">HORARIOS</a></li>
	</ul>

	<div class="bodytab" id="tabs-1">
            <div>
                <table id="customers">
                    <thead>
                        <th><?php echo "Hora" ?></th>
                        <?php foreach ($gestdent_box_list as $gestdent_box): ?>
                        <th><?php echo $gestdent_box->getNombre() ?></th>
                        <?php endforeach; ?>
                    </thead>

                    <tbody>
                        <?php foreach ($gestdent_hora_list as $gestdent_hora): ?>
                        <tr>
                            <td>
                                <?php echo $gestdent_hora->getDescripcion() ?>
                            </td>
                            <?php foreach ($gestdent_box_list as $gestdent_box): ?>
                            <td>
                                <?php echo ("<div id='" . $gestdent_hora->getId() . "x_" . $gestdent_box->getId() . "' class='amarillito'>") ?>
                                <?php //echo "HOLAP"; ?>
                                <?php //echo $gestdent_hora->getDescripcion() ?>
                                <?php echo ("</div>") ?>
                            </td>
                            <?php endforeach; ?>
                        </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        </div>

	<div class="bodytab" id="tabs-2">
            <p>holap 1</p>
        </div>

	<div class="bodytab" id="tabs-3">
            <p>holap 2</p>
        </div>

	<div class="bodytab" id="tabs-4">
            <p>holap 3</p>
        </div>
    </div>
</div><!-- End demo -->


<!---------------------------->
<!---- JAVASCRIPT SECTION ---->
<!---------------------------->

<!---------- TAB ------------->
<script type="text/javascript">
    $(function() {
        $( "#tabs" ).tabs();
    });
</script>
